<!DOCTYPE html>
<!--
# @Time : 2021/9/19 20:29 
# @Author : 常雷
# @File : register.thml
# @Software: PyCharm
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width-decice-width, initial-scale=1">
    {% load static %}
    <Link href="{% static 'css/bootstrap.min.css' %}" rel="styLesheet">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-8 col-lg-offset-2">
            <h1 class="text-center">注册</h1>
            <form id="myform">  <!--这里我们不用form表单提交数据, 只是单纯的用一下form标签而已-->
                {% csrf_token %}
                {% for form in form_obj %}
                    <div class="form-group">
                        <label for="{{ form_obj.auto_id }}">{{ form.label }}</label>
                        {{ form }}
                        <span style="color:red" class="pull-right">{{ form.errors.0 }}</span>
                    </div>
                {% endfor %}
                <div class="form-group">
                    <label for="myfile">选择头像
                        <img src="{% static 'img/default.png' %}" id="myimg" alt="" width="80" style="margin-left: 1px">
                    </label>
                    <input type="file" id="myfile" name="avatar" style="display: none">
                </div>
                <input type="button" class="btn btn-primary pull-right" value="注册" id="id_commit">
            </form>
        </div>
    </div>
</div>
<script>
    {#    为了让图片动态显示 添加事件-文本域变化事件#}
    $("#myfile").change(function () {
        // 利用文件阅读器对象
        // 1.先生成文件阅读器对象
        let myFileReaderObj = new FileReader();
        //2.获取用户上传的头像文件
        let fileObj = $(this)[0].files[0];
        //3.将文件对象交给阅读器对象读取
        myFileReaderObj.readAsDataURL(fileObj)  //异步操作(执行过客), 又是IO操作需要时间,所以需要等待
        //等待xxx加载完毕再执行显示
        myFileReaderObj.onload = function () {
            //4.利用文件阅读器将文件展示到前端页面   修改img的src属性
            $('#myimg').attr('src', myFileReaderObj.result)
        }
    });

    $('#id_commit').click(function (){
        //发送ajax请求      我们发送的数据中包含普通的键值对也包含图片文件(用ajax发送文件)
        let formDataObj = new FormData();   //生成内置对象
        //1.添加普通的键值对
        {#console.log($('#myform').serializeArray()) //(5) [{…}, {…}, {…}, {…}, {…}]        )#}
        $.each($('#myform').serializeArray(),function (index, obj){
            {#console.log(index, obj)     // index 序号     obj 自定义对象{}#}
            formDataObj.append(obj.name, obj.value)
        })
        //2.添加文件数据
        formDataObj.append('avatar', $('#myfile')[0].files[0])
        //3.发送ajax请求传输数据
        $.ajax({
            url:"", //不写朝本地址提交
            type:"post",
            data:formDataObj,

            //需要指定两个关键性参数
            contentType:false,
            processData:false,

            success:function (args){
                if (args.code==1000){
                    //跳转登录页面
                    window.location.href = args.url
                }else{
                    //如何将对应的错误提示展示到对应的input框下面
                    {#console.log(args.msg) //打印出错误信息#}
                    // forms组件渲染的标签的id值都是 id_字段名
                    $.each(args.msg, function (index, obj){
                        {#console.log(index, obj)     //字段名, 报错信息#}
                        let targetId = '#id_'+index;
                        $(targetId).next().text(obj[0]).parent().addClass('has-error')
                        //定位的ID  下一个标签.文本(文本内容).上一个标签.增加一个class标签
                    })
                }
            }
        })
    })
    //给所有的input框绑定获取焦点事件
    $('input').focus(function (){
        $(this).next().text('').parent().removeClass('has-error')
        //将input下面的span标签和input外面的div标签修改内容及属性
    })
</script>

</body>
</html>